<template>
    <div class="home-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in HomeBanner" :key="i">
                <a :href="item.BannerHref"><img :src="item.BannerSrc" alt="" /></a>
            </div>            
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    name:'',
    data(){
        return {
            HomeBanner:[
                {BannerSrc:require('./../assets/app1.jpg'),BannerHref:'/autumn'},
                {BannerSrc:require('./../assets/app2.jpg'),BannerHref:'#'},
                {BannerSrc:require('./../assets/app3.jpg'),BannerHref:'#'},
                {BannerSrc:require('./../assets/app4.jpg'),BannerHref:'#'},
            ]
        }
    },
    mounted(){
        let mySwiper = new Swiper('.home-banner', {
            loop:true,
            pagination: {
                el: '.swiper-pagination',
            },                 
        })
    }
}
</script>
<style>
.home-banner{width: 100%;overflow: hidden;position: relative;}
.home-banner img {width: 100%;}
.swiper-pagination-bullet-active{background: #000;}
</style>
